<template>
  <div id="app">
      <div class="context" ref="context">
           <div class="queryBox" ref="queryBox">
                <el-form :model="formQueryCondition"
                         ref="form" size="mini">
                         <el-row>
                             <!-- 资产标题 -->
                             <el-col :span="5">
                                 <el-form-item :label="$t('CDNInquire.assetName')"
                                    :label-width="queryformLabelWidth">
                                        <el-input v-model.trim="formQueryCondition.assetTitle.val" class="queryItemStyle" clearable
                                                :placeholder="$t('CDNInquire.assetName')"></el-input>
                                </el-form-item>
                             </el-col>
                             <!-- 视频名称 -->
                             <el-col :span="5" :offset="1">
                                <el-form-item :label="$t('CDNInquire.videoName')"
                                :label-width="queryformLabelWidth">
                                    <el-input v-model.trim="formQueryCondition.videoName.val" class="queryItemStyle" clearable
                                            :placeholder="$t('CDNInquire.videoName')"></el-input>
                                </el-form-item>
                             </el-col>
                             <!-- 分发状态 -->
                             <el-col :span="5" :offset="1">
                                 <el-form-item :label="$t('CDNInquire.distributionStatus')" :label-width="queryformLabelWidth">
                                    <el-select v-model="formQueryCondition.distributionStatus.val" class="queryItemStyle">
                                        <el-option :label="$t('CDNInquire.all')" value=""></el-option>
                                        <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText"
                                            v-for="drug in distribute"></el-option>
                                    </el-select>
                                </el-form-item>
                             </el-col>
                             <!-- CDN名称 -->
                             <el-col :span="5" :offset="1">
                                 <el-form-item :label-width="queryformLabelWidth" :label="$t('CDNInquire.CDNName')" >
                                    <el-select v-model="formQueryCondition.site.val"  class="queryItemStyle">
                                        <!-- <el-option label="中兴" value="zte"></el-option> -->
                                        <el-option :label="$t('CDNInquire.all')" value=""></el-option>
                                        <el-option :value="drug.keyId" :key="drug.keyId" :label="drug.siteName"
                                            v-for="drug in site"></el-option>
                                    </el-select>
                                </el-form-item>
                             </el-col>
                         </el-row>
                         <el-row>
                             <!-- 入库时间 -->
                             <el-col :span="5">
                                <el-form-item :label="$t('CDNInquire.storageTime')" :label-width="queryformLabelWidth">
                                    <el-date-picker v-model.trim="formQueryCondition.storageTime.val" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :placeholder="$t('CDNInquire.storageTime')" class="queryItemStyle">
                                    </el-date-picker>
                                </el-form-item>
                             </el-col>
                            <!-- 至 -->
                             <el-col :span="5" :offset="1">
                                <el-form-item :label="$t('CDNInquire.to')" :label-width="queryformLabelWidth">
                                    <el-date-picker v-model.trim="formQueryCondition.storageTimeEnd.val" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :placeholder="$t('CDNInquire.endOfStorageTime')" class="queryItemStyle">
                                    </el-date-picker>
                                </el-form-item>
                             </el-col>
                             <!-- CDN开始时间 -->
                             <el-col :span="5" :offset="1">
                                 <el-form-item :label="$t('CDNInquire.startTime')" :label-width="queryformLabelWidth">
                                    <el-date-picker v-model.trim="formQueryCondition.startTime.val" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :placeholder="$t('CDNInquire.CDNStartTime')" class="queryItemStyle">
                                    </el-date-picker>
                                </el-form-item>
                             </el-col>
                             <!-- 至 -->
                             <el-col :span="5" :offset="1">
                                 <el-form-item :label="$t('CDNInquire.to')" :label-width="queryformLabelWidth">
                                    <el-date-picker v-model.trim="formQueryCondition.startTimeEnd.val" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :placeholder="$t('CDNInquire.endOfStartTime')" class="queryItemStyle">
                                    </el-date-picker>
                                </el-form-item>
                             </el-col>
                         </el-row>
                         <el-row>
                             <!-- CDN结束时间 -->
                             <el-col :span="5">
                                <el-form-item :label="$t('CDNInquire.endTime')" :label-width="queryformLabelWidth">
                                    <el-date-picker v-model.trim="formQueryCondition.endTime.val" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :placeholder="$t('CDNInquire.CDNEndTime')" class="queryItemStyle">
                                    </el-date-picker>
                                </el-form-item>
                             </el-col>
                             <!-- 至 -->
                             <el-col :span="5" :offset="1">
                                 <el-form-item :label="$t('CDNInquire.to')" :label-width="queryformLabelWidth">
                                    <el-date-picker v-model.trim="formQueryCondition.endTimeEnd.val" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :placeholder="$t('CDNInquire.endOfEndTime')" class="queryItemStyle">
                                    </el-date-picker>
                                </el-form-item>
                             </el-col>
                             <!-- 操作类型 -->
                             <el-col :span="5" :offset="1">
                                 <el-form-item :label="$t('CDNRelease.operationType')" :label-width="queryformLabelWidth">
                                    <el-select v-model="formQueryCondition.operationType.val" class="queryItemStyle">
                                        <el-option :label="$t('CDNRelease.all')" value=""></el-option>
                                        <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText"
                                            v-for="drug in type"></el-option>
                                    </el-select>
                                </el-form-item>
                             </el-col>
                         </el-row>
                    <!-- <el-form-item :label="$t('CDNInquire.setTheNumberOfPageRecords')" >
                        <el-select v-model="formQueryCondition.setRecords.val" class="cerState">
                            <el-option v-for="index in 100" :key="index" :label="index" :value="index"></el-option>
                        </el-select>
                    </el-form-item> -->
                    <!-- 按钮 -->
                        <el-row>
                            <el-col :span="24">
                                <div style="text-align:right">
                                    <el-form-item>
                                        <!-- 重置 -->
                                        <el-button v-permission="{menuCode: menuCode,resourceCode: 'resetBtnText'}" type="primary" @click="onReset('form')">{{ $t('btnText.resetBtnText') }}</el-button>
                                    <!-- </el-form-item> -->
                                    <!-- <el-form-item> -->
                                        <!-- 查询 -->
                                        <el-button v-permission="{menuCode: menuCode,resourceCode: 'queryBtnText'}" type="primary" @click="onQuery('queryBtnText')" icon="el-icon-search" :loading="loading">{{ $t('btnText.queryBtnText') }}</el-button>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                </el-form>
            </div>

            <div class="dataBox" ref="dataBox">
                <el-table v-if="isInit" ref="singleTable"
                            :data="tableData"
                            :height="tableHeight"
                            @sort-change="sortChange"
                            v-loading="loading" size="mini"
                            style="width: 100%;" stripe=stripe border=border>
                    <el-table-column type="index" fixed="left" :label="$t('table.xh')">
                    </el-table-column>
                    <!--操作-->
                    <el-table-column :label="$t('assetsCn.table.op')" fixed="left" min-width="380">
                        <template slot-scope="scope">
                            <!--详情-->
                            <el-button size="gv" icon="el-icon-tickets" :loading="loading"
                             @click="clickDetails(scope.$index, scope.row,'detailsBtnText')" v-permission="{menuCode: menuCode,resourceCode: 'detailsBtnText'}"
                                        >{{ $t('CDNInquire.detailsBtnText') }}</el-button>
                            <!--重新注入，REGIST-->
                            <el-button size="gv" icon="el-icon-tickets" :loading="loading"
                                @click="priority(scope.$index, scope.row, 'REGIST', 'registCdnBtnText')" 
                                v-permission="{menuCode: menuCode,resourceCode: 'registCdnBtnText'}">{{ $t('CDNInquire.registCdnBtnText') }}</el-button>
                            <!--更新注入，UPDATE-->
                            <el-button size="gv" icon="el-icon-tickets" :loading="loading"
                                @click="priority(scope.$index, scope.row, 'UPDATE', 'updateCdnBtnText')" 
                                v-permission="{menuCode: menuCode,resourceCode: 'updateCdnBtnText'}">{{ $t('CDNInquire.updateCdnBtnText') }}</el-button>
                            <!--删除注入，DELETE-->
                            <el-button size="gv" icon="el-icon-tickets" :loading="loading"
                                @click="priority(scope.$index, scope.row, 'DELETE', 'deleteCdnBtnText')" 
                                v-permission="{menuCode: menuCode,resourceCode: 'deleteCdnBtnText'}">{{ $t('CDNInquire.deleteCdnBtnText') }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column v-for="(item, index) in tableRows" :key="index" :prop="item.prop" :min-width="(item.width && item.width>0) ? item.width : 130" :label="item.title">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="pageBox" ref="pageBox">
            <el-pagination @size-change="sizeChange"
                            @current-change="currentPageChange"
                            :current-page="pager.curPage"
                            :page-sizes="pager.sizes"
                            :page-size="pager.curSize"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
            </el-pagination>
        </div>

        <!--详情对话框-->
        <el-dialog :title="$t('Resource.label.detailsTitle')" :visible.sync="isShowDetails" top="5vh" width="60%" :close-on-click-modal="false">
            <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
            <el-tab-pane :label="$t('WaitReview.subAssetsInfo.subAssetDetail')" name="first">
                <subassets-info :datas  = "curProps"></subassets-info>
            </el-tab-pane>
            </el-tabs>
        </el-dialog>

  </div>
</template>

<script>

import comBaseVue from '../../baseViewModel';
import CDNInquireInfo from './CDNInquireInfo';

export default {
  mixins: [comBaseVue],
  name:'CDNInquire',
  props: {
    menuCode: String
  },
  data () {
    return {
        modelName:"com.ispr.iptv.entity.media.AddedEpisodeInjectionRecordTableEntity",
        curProps: null,
        isShowDetails:false,
        activeName: 'first',
        isInit:false,
        tableHeight:100,
        distribute:[], //分发状态
        site:[], //站点
        type:[], //操作目标类型
        tableRows: [
            {
                // CDN名称
                title: this.$t("CDNInquire.CDNName"),
                prop: "siteName",
            },
            {
                // 资产编号
                title: this.$t("CDNInquire.assetCode"),
                prop: "subAssetEntity.assetEntity.assetCode",
            },
            {
                // 资产名称
                title: this.$t("CDNInquire.assetName"),
                prop: "subAssetEntity.assetEntity.assetName",
            },
            {
                // 视频编号
                title: this.$t("CDNInquire.videoCode"),
                prop: "subAssetEntity.subassetCode",
            },
            {
                // 视频名称
                title: this.$t("CDNInquire.videoName"),
                prop: "subAssetEntity.subassetName",
            },
            {
                // CDN发布状态
                title: this.$t("CDNInquire.CDNDistributionStatus"),
                prop: "distribute",
            },
            {
                // 操作目标类型
                title: this.$t("CDNRelease.operationType"),
                prop: "action",
            },
            {
                // 入库时间
                title: this.$t("CDNInquire.storageTime"),
                prop: "createdDate",
                width: 180,
            },
            {
                // CDN注入开始时间
                title: this.$t("CDNInquire.CDNStartTime"),
                prop: "cdnInjectionStartTime",
                width: 180,
            },
            {
                // CDN注入结束时间
                title: this.$t("CDNInquire.CDNEndTime"),
                prop: "cdnInjectionEndTime",
                width: 180,
            },
            // {
            //     title: "MD5",
            //     prop: "MD5",
            //     width: 240,
            // },
            // {
            //     title: this.$t("CDNInquire.playAddress"),
            //     prop: "playUrl",
            //     width: 300,
            // },
        ],
        // 查询条件
        formQueryCondition: {
            assetTitle: {
                key: 'subAssetEntity.assetEntity.assetName', //资产名称
                val:'',
                op: 'LIKE',
            },
            videoName: {
                key: 'subAssetEntity.subassetName', //视频名称
                val: '',
                op: 'LIKE',
            },
            distributionStatus: {
                key: 'distribute', //分发状态
                val: 'SuccessfulDistribution',
                op: '=',
            },
            distributionStatus2: {
                key: 'distribute', //分发状态
                val: 'SuccessfulDistribution',
                op: '=',
                group: 'distributionStatus2'
            },
            distributionStatus3: {
                key: 'distribute', //分发状态
                val: 'DistributionFailed',
                op: '=',
                group: 'distributionStatus2'
            },
            site: {
                key: 'siteId', //站点
                val: '',
                op: '=',
            },
            storageTime: {
                key: 'createdDate', //入库时间
                val: '',
                op: '>=',
                group: 'storageTime'
            },
            storageTimeEnd: {
                key: 'createdDate', //至
                val: '',
                op: '<=',
                group: 'storageTimeEnd'
            },
            startTime: {
                key: 'cdnInjectionStartTime', //注入开始时间
                val: '',
                op: '>=',
                group: 'startTime'
            },
            startTimeEnd: {
                key: 'cdnInjectionStartTime', //至
                val: '',
                op: '<=',
                group: 'startTimeEnd'
            },
            endTime: {
                key: 'cdnInjectionEndTime', //注入结束时间
                val: '',
                op: '>=',
                group: 'endTime'
            },
            endTimeEnd: {
                key: 'cdnInjectionEndTime', //至
                val: '',
                op: '<=',
                group: 'endTimeEnd'
            },
            operationType: {
                key: 'action', //操作类型
                val:'',
                op: '=',
            },

        },
    }
  },
  methods:{
     // 重置
    onReset:function(){
        if (this.$refs['form']) {
            this.$refs['form'].resetFields();
        }
        this.formQueryCondition.assetTitle.val = "";
        this.formQueryCondition.videoName.val = "";
        this.formQueryCondition.storageTime.val = "";
        this.formQueryCondition.storageTimeEnd.val ="";
        this.formQueryCondition.startTime.val = "";
        this.formQueryCondition.startTimeEnd.val = "";
        this.formQueryCondition.endTime.val = "";
        this.formQueryCondition.endTimeEnd.val = "";
        this.formQueryCondition.distributionStatus.val ="";
        this.formQueryCondition.site.val ="";
        // this.formQueryCondition.setRecords.val ="";

    },

    // 详情按钮单击事件
    clickDetails: function(index, row) {
        this.queryModelByKeyID(this.modelName,row.keyId,"Query",this.editCallback);
    },
    //详情按钮回调事件
    editCallback: function(isSuccess,json) {
        if(isSuccess){
            this.curProps = json;
            this.activeName = 'first',
            this.isShowDetails = true;
        }
    },
    handleClick(tab, event) {
        console.log(tab, event);
    },

     // 为站点下拉框赋值
    findSite:function(){
        var queryRequest = {
                className: "com.ispr.iptv.entity.sys.Site",//修改为被查询的实体地址
                opKey: "Query",//后台编写相应的接口实现方法，主要负责转化类型
                params: [{key: 'isEnable',op: '=',val: 'Available'}],
                userInfo: this.getUserInfo()
            };
            var _this = this;
            this.axios.post('/api/query', queryRequest, {headers: this.headersObj})//findAllValueType修改为query
                .then(function(res) {
                    // alert(JSON.stringify(res));
                    // alert(res.data.code);
                    if (res.data.code == "SUCCESS") {
                        _this.site = [];
                        for (var i = 0; i < res.data.data.length; i++) {
                            _this.site.push(res.data.data[i]);
                        }
                        _this.formQueryCondition.site.val=_this.site[0].keyId
                    } else {
                        // this.$message.error(this.$i18n.t("errorCode." + json.reason,json.message));
                    }
                })
                .catch(function(error) {
                    console.log(error);
                    // this.$message.error(this.$i18n.t("errorCode." + json.reason,json.message));
                });
    },
     // 为操作目标类型下拉框赋值
    findType: function() {
        this.findByTypeCode("10028",this.setType)
    },
     // 查询操作类型下拉框数据成功后的回调
    setType: function(isSuccess,json) {
        try{

            if (isSuccess) {
                this.type = [];
                for (var i = 0; i < json.data.length; i++) {
                    this.type.push(json.data[i]);
                }
            }
            else {
                this.$message.error(json.msg);
            }
        }
        catch(e){
            alert(e);
        }
    },
    // 为资产类型下拉框赋值
    findDistribute: function() {
        this.findByTypeCode("10018",this.setAssetType)
    },
    // 查询资产类型下拉框数据成功后的回调
    setAssetType: function(isSuccess,json) {
        try{

            if (isSuccess) {
                this.distribute = [];
                for (var i = 0; i < json.data.length; i++) {
                    if(json.data[i].valueText === '分发失败' || json.data[i].valueText === '分发成功'){
                        this.distribute.push(json.data[i]);
                    }
                }
            }
            else {
                this.$message.error(json.msg);
            }
        }
        catch(e){
            alert(e);
        }
    },
    priority: function(index, row, actionCode, rescode){
        // this.$message({
        //      message: this.$i18n.t("message.successTip"),//resource.message.successTip,
        //      type: 'success'
        // });
        this.currentResCode = (rescode && rescode!=='') ? rescode : '';
         var _this = this;
        this.$confirm(this.$i18n.t("CDNRelease.message.areYouSureTopThisData"),
            this.$i18n.t("message.confirmTitle"), {
            confirmButtonText: this.$i18n.t("message.yes"),
            cancelButtonText: this.$i18n.t("message.cancel"),
            type: "warning",
             callback: function (action, instance) {
                if (action == "confirm") {
                     var commandBody = {  "keyId": row.keyId, "version": row.version, "action": actionCode};
                    _this.loading = true;
                    _this.procCommand("MediaToCdnNewProc",
                        _this.modelName,
                        "N",
                         commandBody,
                         null,
                        _this.submitFormCallback);
                }

            }
        });
    },
     // 执行命令后的回调函数
        submitFormCallback: function submitFormCallback(isSuccess,json) {
            this.loading = false;
            if(isSuccess){
                this.isShowEditForm = false;
                this.$message({
                    message: this.$i18n.t("message.successTip"),//resource.message.successTip,
                    type: 'success'
                });
                this.queryTable();
            }
            else
            {
                this.$message({
                            message: json.msg,
                            type: 'warning'
                            });
            }
        },
    enterDown(){
        var g=this
        if(!g.loading){
            g.onQuery()
        }
    }
  },
  mounted: function mounted() {
        this.findSite();  //站点
        this.findDistribute(); //分发状态
        this.findType(); //操作目标类型
        this.tableHeight = document.body.clientHeight - this.$refs.queryBox.offsetHeight -  this.$refs.pageBox.offsetHeight - 120;
        this.isInit = true;
        // this.onQuery();
  },
  components: {
    "subassets-info": CDNInquireInfo,
  }
}


</script>

<style scoped>
.separateStyle{
    margin-left: 14px;
}
</style>
